<template>
	<view class="searchPage">
		<headerinfo></headerinfo>
		<view class="" style="height: 20px;">

		</view>

		<view class="boxShadow">
			<view class="content">
				<u-navbar title="我的收藏" :autoBack="true"></u-navbar>
			</view>
			<view class="content" v-if="listData.length > 0">
				<view class="card" v-for="(item, index) in listData" :key="index"><new-item :new="item" :newIndex="index" 	@cancelNew="cancelNew"></new-item></view>
			</view>
		</view>

		<nodata v-if="listData.length == 0 && loadingOver"></nodata>
		<view class="nomore" v-if="query.lastDocId == '' && listData.length > 0">
			没有更多了 ~
		</view>
	</view>
</template>

<script>
	import newItem from '@/components/new-item.vue';
	export default {
		components: {
			newItem
		},
		data() {
			return {
				query: {
					lastDocId: '',
					pageSize: 10
				},
				listData: [],
				listOver: false,
				loadingOver: false,
			};
		},
		onPullDownRefresh() {
			this.query.lastDocId = '';
			this.getData();
		},
		onReachBottom() {
			if (!this.listOver) {
				this.getData();
			}
		},
		onLoad() {
			this.getData();
		},
		methods: {
			cancelNew() {
				this.listData = [];
				this.query.lastDocId = '';
				this.getData();
			},
			getData() {
				uni.showLoading({
					title: '加载中...'
				});
				this.loadingOver = false
				this.$api.myFavorite(this.query).then(res => {
					console.log(res);
					this.listData = [...this.listData, ...res.list];
					if (res.lastDocId) {
						this.query.lastDocId = res.lastDocId;
					} else {
						this.query.lastDocId = ''
					}

					if (res.list.length < this.query.pageSize) {
						this.listOver = true
					}
					this.loadingOver = true
					uni.hideLoading();
					uni.stopPullDownRefresh();
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.boxShadow {
		width: 60%;
		border-radius: 20rpx;
		overflow: hidden;
		margin: 0 auto;
		box-shadow: 0 0 3px #ccc;
	}

	.content {}

	.searchPage {
		background-color: #fff;

		.card {
			margin-top: 20rpx;
		}
	}
</style>